<template>
    <div class="page">
        <template v-if="userPackageInfo.level===0">
            <div class="flex_center align_center flex_column" style="width: 100%; height: 100%;">
                <img src="../../assets//lock.png" style="width: 150px; height: 150px;">
                <p style="padding-top: 15px; font-weight: 600;">升级套餐，即可解锁此功能体验</p>
                <div class="text_center margin20" style="width: 180px; height: 36px; background: #0147fd; border-radius: 4px; color: #fff; line-height: 36px; cursor: pointer;" @click="serviceDialog=true">联系客服，升级套餐</div>
            </div>
        </template>
        <template v-else>
            <!-- 筛选部分 -->
            <div class="searchVue flex_between">
                <div class="flex">
                    <el-input v-model="key" placeholder="搜索关键字" style="width: 200px; height: 40px;" @input="getList" clearable prefix-icon="el-icon-search"></el-input>
                </div>
                <div class="flex">
                    <div class="question" @click="whatDialog=true">什么是知识库?</div>
                    <div class="btn" @click="toCreate" v-if="userPackageInfo.canCreateDataset===1">添加知识库</div>
                </div>
            </div>

            <!-- 列表 -->
            <div class="pageInner ">
                <div class="thVue flex">      
                    <div class="li" style="width: 300px; line-height: 40px; text-align: center; font-weight: 600;">名称</div>            
                    <div class="li" style="flex: 1; line-height: 40px; text-align: center; font-weight: 600;">AI客服描述</div>  
                    <div class="li" style="width: 160px; line-height: 40px; text-align: center; font-weight: 600;">操作</div>
                </div>
                <div class="tdContent relative">
                    <div class="flex_column align_center absolute_auto" v-if="isEmpty">
                        <img src="../../assets/empty.png" slot="empty" style="width: 313px; height: 172px; margin-bottom: 20px">
                        <span style="color: #101010; font-weight: 600; font-size: 18px">当前列表是空哦~</span>
                        <div style="color: #8F959E; padding-top: 15px">点击右上角的添加知识库，绑定您的知识库吧</div>
                    </div>
                    <div class="tdVue flex" v-for="(item, index) in list" :key="index">
                        <div class="li line-1" style="width: 300px; line-height: 50px; text-align: center; font-size: 13px; padding: 0 10px" :title="item.name" v-html="searchLight(item.name)"></div>
                        <div class="li line-1" style="flex: 1; line-height: 50px; text-align: center; font-size: 13px; padding: 0 10px" :title="item.describe" v-html="searchLight(item.describe)"></div> 
                        <div class="li flex_center align_center" style="width: 160px;" v-if="user.id==item.userId">
                            <div class="oBtn" @click="handleManage(item.id)">管理</div>
                            <div class="oBtn oBtn1" @click="handleDelete(item.id)">删除</div>
                        </div>  
                        <div class="li flex_center align_center" style="width: 160px;" v-else>
                            <div class="btn3">无操作权限</div>
                        </div>
                    </div>
                </div>
            </div> 

            <!-- 分页 -->
            <div class="paginationVue flex_center align_center">
                <el-pagination background layout="total, prev, pager, next" :page-size="pageSize" :total="total" @current-change="handleCurrentChange"></el-pagination>
            </div>
        </template>
        

        <createVue :dialogTableVisible="createDialog" ref="createRef" @beforeClose="createDialog=false" @callback="getList"></createVue>
        <whatVue :dialogTableVisible="whatDialog" @beforeClose="whatDialog=false"></whatVue>
        <serviceVue :dialogTableVisible10="serviceDialog" @beforeClose="serviceDialog=false"></serviceVue>
    </div>
</template>

<script>
import createVue from './components/create.vue'
import whatVue from './components/what.vue'
import { toast } from "@/common/tools"
import serviceVue from '@/components/service.vue';
import { mapState } from 'vuex'
export default {
    components: {
        createVue,
        whatVue,
        serviceVue
    },
    data(){
        return {
            createDialog: false,
            editDialog: false,
            whatDialog: false,
            serviceDialog: false,
            pageNum: 1,
            pageSize: 15,
            total: 0,
            list: [],
            id: "",
            isEmpty: false,
            key: ""
        }
    },

    created(){
        this.getList()
    },

    computed: {
        ...mapState({
            userPackageInfo: state => state.userPackageInfo,
            user: state => state.user, 
        })
    },

    methods: {
        // 获取知识库列表
        getList(){
            this.$post("/front/dataset/datasetList", {
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                searchName: this.key
            }).then(res=>{
                console.log(res)
                this.list = res.data.obj.list
                this.total = res.data.obj.total
                this.isEmpty = this.total===0
            })
        },

        // 创建
        toCreate(){
            this.createDialog = true
        },

        // 管理
        handleManage(id){
            this.$router.push({
                name: "repository_manage",
                query: { id: id }
            })
        },

        // 删除
        handleDelete(id){
            this.$alert('确认删除该知识库?', '删除知识库', {
                confirmButtonText: '确定',
                confirmButtonClass: 'confirmButtonClass',
                cancelButtonText: '取消',
                showCancelButton: true,
                showClose: false,
                callback: action => {
                    console.log(action)
                    if(action==="confirm") {
                        this.$post("/front/dataset/deleteDataset", {
                            ids: id
                        }).then(res=>{
                            if(res.data.code===0) {
                                toast(0, "删除成功")
                                this.getList()
                            }else{
                                toast(1, res.data.msg)
                            }
                        })
                    }
                }
            });
        },

        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.pageNum = val
            this.getList()
        },

        // 搜索内容高亮显示
        searchLight(val){
            if(!this.key) return val
            const highlighted = val.replace(new RegExp(this.key, 'gi'), match => {
                return `<span style="color:#0147fd; font-weight: 600;">${match}</span>`;
            });
            return highlighted;
        },
    }
}
</script>


<style lang="less" scoped>
:deep(.el-icon-circle-close) {
    font-size: 18px !important;
    color: #409EFF !important;
}
:deep(.el-icon-search:before) {
    color: #AAA !important;
}
:deep(.el-button--edit) {
  background: #AAA;
  span {
    color: #fff !important;
  }
}
.page {
    width: 100%;
    height: 100%;
    padding: 10px 10px 0;
    .searchVue {
        width: 100%;
        height: 50px;
        .btn {
            width: 100px;
            height: 40px;
            border-radius: 4px;
            background: #0147fd;
            border-radius: 5px;
            line-height: 40px;
            text-align: center;
            color: #fff;
            cursor: pointer;
            margin-left: 15px;
        }
        .question {
            color: #AAA;
            font-size: 14px;
            line-height: 40px;
            cursor: pointer;
        }
        .question:hover {
            text-decoration: underline;
            color: #0147fd;
        }
    }
    .pageInner {
        width: 100%;
        height: calc(100% - 100px);
        .thVue {
            width: 100%;
            height: 40px;
            background: #f5f5f5;
        }
        .tdContent {
            width: 100%;
            height: calc(90vh - 160px);
            overflow: scroll;
            .tdVue {
                width: 100%;
                height: 50px;
                line-height: 50px;
                border-bottom: 1px solid #f5f5f5;
                span {
                    color: #333;
                    font-size: 13px;
                }
                .oBtn,.oBtn1 {
                    width: 46px;
                    height: 28px;
                    line-height: 28px;
                    text-align: center;
                    background: #0147fd;
                    border-radius: 3px;
                    margin-left: 5px;
                    color: #fff;
                    font-size: 12px;
                    cursor: pointer;
                }
                .oBtn1 {
                    background: #d81e06;
                }
                .btn3 {
                    width: 120px;
                    height: 28px;
                    line-height: 28px;
                    text-align: center;
                    background: #AAA;
                    border-radius: 3px;
                    margin-left: 5px;
                    color: #fff;
                    font-size: 12px;
                }
            }
            .tdVue:hover {
                background: #f5f5f5;
            }
        }
        .tdContent::-webkit-scrollbar {
            width: 0;
            height: 0;
        }
    }
    .pageInner::-webkit-scrollbar {
        width: 0;
        height: 0;
    }
    .paginationVue {
        width: 100%;
        height: 50px;
    }
}
</style>